import React, { useState } from 'react'
import VirtualList from './VirtualList'
import './VirtualListExample.css'

/**
 * 虚拟列表示例组件
 * 展示如何使用VirtualList组件渲染大量数据
 */
const VirtualListExample = () => {
  const [listSize, setListSize] = useState(1000)
  const [itemHeight, setItemHeight] = useState(60)
  
  // 生成示例数据
  const generateItems = () => {
    return Array.from({ length: listSize }, (_, index) => ({
      id: index + 1,
      title: `列表项 ${index + 1}`,
      description: `这是列表项 ${index + 1} 的描述信息，用于演示虚拟列表的性能`,
      date: new Date(Date.now() - index * 86400000).toLocaleDateString()
    }))
  }
  
  // 渲染单个列表项
  const renderItem = (item, index) => {
    return (
      <div className="example-list-item">
        <div className="example-item-id">{item.id}</div>
        <div className="example-item-content">
          <h4 className="example-item-title">{item.title}</h4>
          <p className="example-item-description">{item.description}</p>
          <span className="example-item-date">{item.date}</span>
        </div>
      </div>
    )
  }
  
  // 处理列表大小变化
  const handleSizeChange = (e) => {
    setListSize(parseInt(e.target.value))
  }
  
  // 处理列表项高度变化
  const handleHeightChange = (e) => {
    setItemHeight(parseInt(e.target.value))
  }
  
  const items = generateItems()
  
  return (
    <div className="virtual-list-example">
      <h2>虚拟列表示例</h2>
      
      <div className="example-controls">
        <div className="control-group">
          <label htmlFor="listSize">列表项数量:</label>
          <input 
            type="range" 
            id="listSize" 
            min="100" 
            max="10000" 
            step="100" 
            value={listSize}
            onChange={handleSizeChange}
          />
          <span>{listSize} 项</span>
        </div>
        
        <div className="control-group">
          <label htmlFor="itemHeight">列表项高度:</label>
          <input 
            type="range" 
            id="itemHeight" 
            min="30" 
            max="150" 
            step="10" 
            value={itemHeight}
            onChange={handleHeightChange}
          />
          <span>{itemHeight}px</span>
        </div>
      </div>
      
      <div className="example-stats">
        <p>渲染数据总量: {listSize} 项</p>
        <p>虚拟列表容器高度: 500px</p>
        <p>列表项高度: {itemHeight}px</p>
      </div>
      
      <div className="virtual-list-demo">
        <VirtualList
          items={items}
          renderItem={renderItem}
          itemHeight={itemHeight}
          overScanCount={3}
          style={{ height: '500px', border: '1px solid #e0e0e0', borderRadius: '8px' }}
        />
      </div>
      
      <div className="example-instructions">
        <h3>如何使用虚拟列表</h3>
        <pre>
{`import VirtualList from './VirtualList'

// 基本用法
<VirtualList
  items={yourDataArray}
  renderItem={(item, index) => (
    <YourCustomItemComponent item={item} index={index} />
  )}
  itemHeight={60} // 列表项固定高度
  overScanCount={5} // 预渲染的额外项数
  style={{ height: '400px' }} // 容器样式
/>`}
        </pre>
        <p>注: 虚拟列表通过只渲染可视区域内的列表项，并在滚动时动态更新视图，大大提高了大数据量列表的渲染性能。</p>
      </div>
    </div>
  )
}

export default VirtualListExample